<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useEchart } from '../composables/useEchart'
import * as echarts from 'echarts'

const elRef = ref<HTMLElement | null>(null)

const getOption = (): echarts.EChartsOption => {
	const orange = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
		{
			offset: 0,
			color: '#FF7D00'
		},
		{
			offset: 1,
			color: '#FF9E1F'
		}
	])
	const blue = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
		{
			offset: 0,
			color: '#00B2FF'
		},
		{
			offset: 1,
			color: '#22DFFF'
		}
	])

	const x = ['郑州体育', '洛阳体育', '南阳体育', '开封体育', '许昌体育', '信阳体育']
	const male = [126, 141, 150, 132, 138, 145]
	const female = [69, 83, 73, 70, 88, 77]

	return {
		grid: {
			left: 40,
			right: 20,
			top: 60,
			bottom: 40
		},
		tooltip: {
			trigger: 'axis',
			valueFormatter: (value: any, dataIndex: number) => {
				const val = Array.isArray(value) ? value[0] : value
				if (val === null || typeof val !== 'number') return '--'
				return Number.isInteger(val) ? val.toLocaleString() : `${val}%`
			}
		},
		legend: { data: ['男', '女'] },
		dataZoom: [
			{
				type: 'inside',
				realtime: true
			},
			{
				type: 'slider',
				height: 12,
				bottom: 8
			}
		],
		xAxis: {
			type: 'category',
			data: x,
			axisTick: { show: false },
			axisLine: { lineStyle: { color: '#E5E6EB' } },
			axisLabel: { color: '#86909C' }
		},
		yAxis: {
			type: 'value',
			axisLine: { show: false },
			splitLine: { lineStyle: { color: '#F2F3F5' } },
			axisLabel: { color: '#86909C' }
		},
		series: [
			{
				name: '男',
				type: 'bar',
				data: male,
				itemStyle: {
					color: blue,
					borderRadius: [6, 6, 0, 0]
				},
				barWidth: 14
			},
			{
				name: '女',
				type: 'bar',
				data: female,
				itemStyle: {
					color: orange,
					borderRadius: [6, 6, 0, 0]
				},
				barWidth: 14
			}
		]
	}
}

const { init } = useEchart(elRef, getOption)

onMounted(() => init())
</script>

<template>
	<div class="h-[440px] bg-white rounded-[4px] p-[20px]">
		<div class="text-primary text-[16px] leading-[24px] mb-[12px]">各注册单位不同性别通过人数及占比统计</div>
		<div
			ref="elRef"
			class="w-full h-[364px]"
		/>
	</div>
</template>
